<template>
  <div class="section-list" v-loading="loading">
    <div class="section-title">工序</div>
    <div class="section-content">
      <div
        v-for="section in workSectionList"
        :key="section.id"
        class="section-item"
        @mousedown="handleDragNode(section)"
        @touch="handleDragNode(section)"
      >
        <span>{{ section.workSectionName }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { listWorkSection } from "@/api/workMgmt/workSection";
export default {
  props: {
    lf: Object,
  },
  data() {
    return {
      workSectionList: [],
      loading: false,
    };
  },
  methods: {
    init() {
      this.getWorkSectionList();
    },
    // 获取工序列表
    getWorkSectionList() {
      this.loading = true;
      const param = {
        pageNum: 1,
        pageSize: 2000
      }
      listWorkSection(param)
        .then((res) => {
          if (res?.rows?.length) {
            this.workSectionList = res?.rows;
          } else {
            this.workSectionList = [];
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleDragNode(section) {
      this.$props.lf.dnd.startDrag({
        type: "section",
        properties: { ...section },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.section-list {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 160px;
  height: 100%;
  z-index: 10;
  background: #ffffff;
  padding: 4px;
  .section-title {
    height: 40px;
    line-height: 40px;
    font-weight: 600;
    text-align: center;
    border-color: #a5a5a5;
  }
  .section-content {
    height: calc(100% - 40px);
    overflow: auto;
    /* 整个滚动条 */
    &::-webkit-scrollbar {
      /* 对应纵向滚动条的宽度 */
      width: 5px;
      /* 对应横向滚动条的宽度 */
      height: 5px;
    }

    /* 滚动条上的滚动滑块 */
    &::-webkit-scrollbar-thumb {
      background-color: #d1d1d1;
      border-radius: 5px;
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      border-radius: 5px;
    }
  }
  .section-item {
    padding: 8px 5px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    margin: 0 10px 10px;
    text-align: center;
    user-select: none;
    cursor: move;
  }
}
</style>
